<!-- 调配科目 -->

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="调配学员" prop="studentId" required>
      <el-select-v2
        v-model="ruleForm.studentId"
        :options="options"
        placeholder="请选择调配学员"
        style="width: 240px"
        multiple
      />
    </el-form-item>

    <el-form-item label="调配科目" prop="subject" required>
      <el-select
        v-model="ruleForm.subject"
        placeholder="请选择调配科目"
        @change="changeItemType"
        style="width: 240px"
      >
        <el-option
          v-for="item in Subjectdata"
          :key="item.objectId"
          :label="item.subject"
          :value="item.subject"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="科目状态" prop="subjectState" required>
      <el-select
        v-model="ruleForm.subjectState"
        placeholder="请选择科目状态"
        style="width: 240px"
      >
        <el-option
          v-for="item in SubDetail"
          :key="item.objectId"
          :label="item.subject"
          :value="item.subject"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="创建时间" prop="SubjectTime" required>
      <el-date-picker
        v-model="ruleForm.SubjectTime"
        style="width: 240px"
        type="data"
        placeholder="请选择创建时间"
      />
    </el-form-item>

    <el-form-item label="备注" prop="subjectRemark">
      <el-input
        v-model="ruleForm.subjectRemark"
        placeholder="请输入科目备注"
        style="width: 240px"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="submitForm(ruleFormRef)"
        >确认保存</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { StuSubjectPost, StuExamGet } from "../../../api/students";
import { ElMessage } from "element-plus";
const props = defineProps({
  Subdata: String,
});

const emit = defineEmits(["update:modelValue", "handleref"]);

//受理人员框
// 处理数据穿给受理转台页面
interface StateType {
  value: string;
  label: string;
}
const StateSuject = (arr: any) => {
  let newArr: any = [];
  arr.forEach((item: any) => {
    newArr.push({ value: item.objectId, label: item.name });
  });
  return newArr;
};

watch(
  () => props.Subdata,
  () => {
    options.value = StateSuject(JSON.parse(props.Subdata as string));

    for (let i = 0; i < JSON.parse(props.Subdata as string).length; i++) {
      if (
        JSON.parse(props.Subdata as string)[i].MoneyState !== "已缴费" ||
        JSON.parse(props.Subdata as string)[i].state !== "受理完成"
      ) {
        SubjectState.value = false;
        break;
      }
    }
  }
);
onMounted(() => {
  options.value = StateSuject(JSON.parse(props.Subdata as string));

  for (let i = 0; i < JSON.parse(props.Subdata as string).length; i++) {
    console.log(JSON.parse(props.Subdata as string)[i]);
    if (
      JSON.parse(props.Subdata as string)[i].MoneyState !== "已缴费" ||
      JSON.parse(props.Subdata as string)[i].state !== "受理完成"
    ) {
      SubjectState.value = false;
      break;
    }
  }
});

let options = ref<StateType[]>([]);
// 受理状态框

// 定义调配科目数据包
StuExamGet().then((res) => {
  Subjectdata.value = res.data.results;
});
const Subjectdata = ref<any>([]);

// 不同科目触发不同的数据包
let SubDetail = ref<any>([]);

const changeItemType = (val: string) => {
  Subjectdata.value.forEach((item: any) => {
    if (item.subject == val) {
      StuExamGet(item.objectId).then((res) => {
        SubDetail.value = res.data.results;
      });
    }
  });
};

interface SubjectType {
  studentId: string[];
  subject: string;
  subjectState: string;
  SubjectTime: Date | null;
  subjectRemark: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = ref<SubjectType>({
  studentId: [],
  subject: "",
  subjectState: "",
  SubjectTime: null,
  subjectRemark: "",
});

let SubjectState = ref<boolean>(true);
const submitForm = (formEl: FormInstance | undefined) => {
  if (SubjectState.value) {
    if (!formEl) return;
    formEl.validate(async (valid) => {
      if (valid) {
        await StuSubjectPost(ruleForm.value);
        formEl.resetFields();
        emit("update:modelValue", false);
        emit("handleref");
      } else {
        console.log("error submit!");
        return false;
      }
    });
  } else {
    ElMessage({
      message: "操作失败，请检查选中学员的缴费情况和受理情况",
      type: "error",
    });
  }
};
</script>
